<template>
  <div class="test-aggregation">
    <el-card>
      <div slot="header" class="clearfix">
        <span>聚合登录系统测试</span>
      </div>
      
      <div class="test-info">
        <h3>当前登录信息：</h3>
        <p><strong>用户类型：</strong>{{ userTypeText }}</p>
        <p><strong>手机号：</strong>{{ userPhone }}</p>
        <p><strong>Token：</strong>{{ token ? '已获取' : '未获取' }}</p>
      </div>
      
      <div class="test-actions">
        <el-button type="primary" @click="goToLogin">前往聚合登录</el-button>
        <el-button type="success" @click="testApi">测试API连接</el-button>
        <el-button type="warning" @click="logout">退出登录</el-button>
      </div>
      
      <div class="api-test-result" v-if="apiResult">
        <h4>API测试结果：</h4>
        <pre>{{ JSON.stringify(apiResult, null, 2) }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script>
import { sendSmsCode } from '@/api/aggregation'

export default {
  name: 'TestAggregation',
  computed: {
    userType() {
      return this.$store.getters.userType
    },
    userPhone() {
      return this.$store.getters.userPhone
    },
    token() {
      return this.$store.getters.token
    },
    userTypeText() {
      const types = { 2: '业务员', 3: '商家', 4: '区域代理', 5: '总公司' }
      return types[this.userType] || '未登录'
    }
  },
  data() {
    return {
      apiResult: null
    }
  },
  methods: {
    goToLogin() {
      this.$router.push('/aggregation-login')
    },
    async testApi() {
      try {
        this.apiResult = { loading: true, message: '正在测试API连接...' }
        const response = await sendSmsCode('13800138000')
        this.apiResult = {
          success: true,
          data: response,
          message: 'API连接成功'
        }
        this.$message.success('API连接测试成功')
      } catch (error) {
        this.apiResult = {
          success: false,
          error: error.message || error,
          message: 'API连接失败'
        }
        this.$message.error('API连接测试失败')
      }
    },
    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        // 使用 window.location.replace 强制刷新页面并跳转到登录页
        window.location.replace('/aggregation-login')
      })
    }
  }
}
</script>

<style scoped>
.test-aggregation {
  padding: 20px;
}

.test-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.test-info p {
  margin: 10px 0;
  font-size: 14px;
}

.test-actions {
  margin-bottom: 20px;
}

.test-actions .el-button {
  margin-right: 10px;
}

.api-test-result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.api-test-result pre {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 12px;
  max-height: 300px;
  overflow-y: auto;
}
</style>
